<template>
  <ul :class="`mo-paging mo-paging-${displaySize}`">
    <!-- first -->
    <li
      v-show="index != 1"
      :class="[
        'paging-item',
        'paging-item--first',
        { 'paging-item--disabled': index === 1 }
      ]"
      @click="first"
    >
      <!-- <i aria-hidden="true" class="fa fa-step-backward"></i> -->
      <span>Prev</span>
    </li>
    <!-- prev -->
    <li
      v-show="index != 1"
      :class="[
        'paging-item',
        'paging-item--prev',
        { 'paging-item--disabled': index === 1 }
      ]"
      @click="prev"
    >
      ←
    </li>

    <li :class="['paging-item', 'paging-item--more']" v-if="showPrevMore">
      ...
    </li>

    <template v-if="!isMobile">
      <li
        :class="[
          'paging-item',
          { 'paging-item--current': pageIndex === pager }
        ]"
        v-for="(pager, index) in pagers"
        :key="index"
        @click="go(pager)"
      >
        {{ pager }}
      </li>
    </template>

    <li v-if="isMobile" class="paging-item paging-item--current">
      Page {{ pageIndex }}/{{ pages }}
    </li>

    <li :class="['paging-item', 'paging-item--more']" v-if="showNextMore">
      ...
    </li>
    <!-- next -->
    <li
      v-show="index != pages"
      :class="[
        'paging-item',
        'paging-item--next',
        { 'paging-item--disabled': index === pages }
      ]"
      @click="next"
    >
      →
    </li>
    <!-- last -->
    <li
      v-show="index != pages"
      :class="[
        'paging-item',
        'paging-item--last',
        { 'paging-item--disabled': index === pages }
      ]"
      @click="last"
    >
      <!-- <i aria-hidden="true" class="fa fa-step-forward"></i> -->
      <span>Next</span>
    </li>

    <li v-if="!isMobile" class="paging-item paging-item--current">
      {{ pageIndex }}/{{ pages }}
    </li>
  </ul>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
declare var $: any;

@Component<pager>({
  watch: {
    pageIndex(val) {
      this.index = val || 1;
    },
    pageSize(val) {
      this.limit = val || 9;
    },
    total(val) {
      this.size = val || 1;
    }
  }
})
export default class pager extends Vue {
  //页面中的可见页码，其他的以...替代, 必须是奇数
  @Prop({ type: Number, required: false, default: 5 })
  perPages!: number;

  //当前页码
  @Prop({ type: Number, required: true, default: 1 })
  pageIndex!: number;

  //每页显示条数
  @Prop({ type: Number, required: true, default: 9 })
  pageSize!: number;

  //总记录数
  @Prop({ type: Number, required: true, default: 1 })
  total!: number;

  //滚动条位置
  @Prop({
    type: Object,
    required: false,
    default: () => ({ enable: true, top: 0 })
  })
  scrollTo!: any;

  //尺寸
  @Prop({ type: String, required: false, default: 'normal' })
  displaySize!: string;

  //data

  public index: number = this.pageIndex; //当前页码

  public limit: number = this.pageSize; //每页显示条数

  public size: number = this.total || 1; //总记录数

  public showPrevMore: Boolean = false; //上一页

  public showNextMore: Boolean = false; //下一页

  //computed

  //计算总页码
  get pages(): number {
    return Math.ceil(this.size / this.limit);
  }

  //计算页码，当count等变化时自动计算
  get pagers() {
    const array = [];

    const perPages = this.perPages;
    const pageCount = this.pages;
    let current = this.index;
    const _offset = (perPages - 1) / 2;

    const offset = {
      start: current - _offset,
      end: current + _offset
    };

    //-1, 3
    if (offset.start < 1) {
      offset.end = offset.end + (1 - offset.start);
      offset.start = 1;
    }
    if (offset.end > pageCount) {
      offset.start = offset.start - (offset.end - pageCount);
      offset.end = pageCount;
    }
    if (offset.start < 1) offset.start = 1;

    this.showPrevMore = offset.start > 1;
    this.showNextMore = offset.end < pageCount;

    for (let i = offset.start; i <= offset.end; i++) {
      // if (this.isMobile && array.length > 1) return array;

      array.push(i);
    }

    return array;
  }

  get isMobile(): boolean {
    return false;
  }

  //方法
  //上一页
  public prev() {
    if (this.index > 1) {
      this.go(this.index - 1);
    }
  }

  //下一页
  public next() {
    if (this.index < this.pages) {
      this.go(this.index + 1);
    }
  }

  //首页
  first() {
    if (this.index !== 1) {
      this.go(1);
    }
  }

  //最后一页
  last() {
    if (this.index != this.pages) {
      this.go(this.pages);
    }
  }

  //跳转
  go(pageIndex: number) {
    if (this.index !== pageIndex) {
      this.index = pageIndex;
      //父组件通过change方法来接受当前的页码
      this.$emit('change', this.index);
      //   if (this.scrollTo && this.scrollTo.enable) {
      //     this.scrollToTop(this.scrollTo.top);
      //   }
    }
  }

  //回到顶部
  scrollToTop(top: number) {
    $('html,body')
      .stop()
      .animate(
        {
          scrollTop: top
        },
        0
      );
  }
}
</script>
<style lang="scss" scoped>
.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 5px 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  .paging-item {
    display: inline-block;
    font-size: 1rem;
    position: relative;
    transition: 0.5s;
    padding: 6px 12px;
    text-decoration: none;
    margin-left: -1px;
    cursor: pointer;
    padding: 0 10px;
    background-color: #dbdbdb;
    color: #919191;
    margin: 0 5px;
    border-radius: 5px;
    line-height: 28px;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      // color: red;
      // color: var(--text-white);
      // background: var(--gradualPink);
      background-color: #000000;
      color: white;
      // border-color: rgb(84, 181, 219)
      // transform: scale(1.5);
    }
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: 0.75;
    }
    &.paging-item--disabled,
    &.paging-item--more {
      color: #505050;
    }
    &.paging-item--more {
      cursor: default;
    }
    &.paging-item--current {
      cursor: default;
      position: relative;

      z-index: 1;
      // color: red;
      background-color: #1976d2;
      color: white;
    }
  }
}

.mo-paging-mini .paging-item {
  font-size: 0.8rem;
  padding: 1px 4px;
  line-height: 16px;
}

@media (max-width: 720px) {
  .paging-item {
    padding: 0 10px;
    margin: 0 2px;
  }
}
</style>
